window.addEventListener("load", function () {
    // 功能1：移入移出交互
    // 思路：
    // 获取相关节点$("listTow li")
    // 给li绑定移入移出事件
    $(".listTow li").forEach(function (v) {
        // 移入事件
        v.addEventListener("mouseover", function () {
            // 背景变蓝
            this.style.backgroundColor = "#2f7ee9"
            // 字体变白
            this.style.color = "#fff"
            // 切换透明图片
            // 将图片的后缀名前加-c，及api01.svg => api01-c.svg
            let img = this.firstElementChild.src;
            this.firstElementChild.src = img.replace(".svg", "-c.svg");//后缀名替换
        });
        v.addEventListener("mouseout", function () {
            // 背景变蓝
            this.style.backgroundColor = "#fff"
            // 字体变白
            this.style.color = "#000"
            // 切换透明图片
            // 将图片的后缀名前加-c，及api01.svg => api01-c.svg
            let img = this.firstElementChild.src;
            //   第一个儿子元素的src属性
            this.firstElementChild.src = img.replace("-c.svg", ".svg");//后缀名替换
        })
    });

    // 独角兽区域
    // 获取节点
    const map = $(".map");
    // 默认显示第一张图片
    map[0].style.opacity = "1";
    // 设置变量
    let index = 1;
    this.window.setInterval(function () {
        // 排他思想，不管当前显示谁，都让他不显示
        map.forEach(function (v) {
            v.style.opacity = "0";
        });
        map[index].style.opacity = "1";
        // 索引每隔一个周期++
        index++
        // 索引到达最大值时回复初始值
        if (index > map.length - 1) {
            index = 0;
        }
    }, 3000);



    // 回到顶部
    window.onscroll = function () {
        if (scrollY > 200) {
            $("#BOX").style.display = `block`;
        } else {
            $("#BOX").style.display = `none`;
        }
    };
    $("#BOX").onclick = function () {
        let a = window.scrollY;
        let timer = setInterval(function () {
            a -= 10;
            window.scrollTo(0, a);
            if (a <= 0) {
                clearInterval(timer);

            }
        }, 1)
    }





















    var mySwiper = new Swiper(".swiper", {
        autoplay: true, //可选选项，自动滑动
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
});